<template>
	<view class="layout">
		<!-- 自定义头部 -->
		<view class="navbar">
			<!-- 状态栏 -->
			<!-- #ifndef H5 -->
			<view class="statusBar" :style="{height:statusBarHeight+'px'}"></view>
			<!-- #endif -->
			<!-- 标题栏 -->
			<view class="titleBar" :style="{height:titleBarHeight+'px'}">
				<!-- 退回到上一级 -->
				<view class="title-back" v-if="isBack" @tap="BackPage">
					<u-icon name="arrow-left" color="#000000" width="18rpx" height="32rpx"></u-icon>
				</view>
				<u-search margin="12rpx 20rpx" placeholder="奶粉" @search="OnSearch" actionText="" v-model="keyword" :clearabled="true"></u-search>
			</view>
		</view>
		<!-- 占位的 -->
		<view class="fill" :style="{ height:statusBarHeight+titleBarHeight+'px' }">

		</view>
	</view>
</template>

<script setup>
import {ref,defineEmits, inject} from 'vue'
let system = uni.getSystemInfoSync();
const statusBarHeight = ref(system.statusBarHeight)
console.log(statusBarHeight.value)
console.log(system)
// 到上面为止已经获取了状态栏高度
// 然后让小程序的高度与胶囊按钮高度一样，用uniapp的api===》uni.getMenubutton
let { top,height } =  uni.getMenuButtonBoundingClientRect();
// console.log(menubutton)
console.log(top,height)
// top代表胶囊按钮到顶部的距离，height代表胶囊按钮的高度
let titleBarHeight = ref(height + (top - statusBarHeight.value)*2)

const keyword = ref('')
const emit = defineEmits(['get-key'])

// 让父组件可以改
defineProps({
	isBack: {
		type: [Boolean, String],
		default: false
	}
})

function BackPage(){
	uni.navigateBack({
		delta: 1
	})
}

// 搜索
function OnSearch(e){
	// emit('get-key',)
	// console.log("得到的", e)
	keyword.value = e
	console.log("keyword", keyword.value)
	emit('get-key', keyword.value)
}


</script>

<style scoped lang="scss">
	.layout {
		// 给navbar一个固定定位
		.navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
			background:#ffffff;
			.statusBar {
				// border: 1px solid red;
			}

			.titleBar {
				display: flex;
				padding: 0 30rpx;
				// border: 1px solid green;
				align-items: center;
				
				.title-back {
					width: 18rpx;
					height: 32rpx;
					line-height: 32rpx;
					// border: 1px solid red;
				}
				
				u-search {
					
				}
				
			}
		}
	}
</style>